<route>
{
  "meta":{
    "title":"消息模板详情"
  }
}
</route>

<template>
  <div style="overflow-y:auto">
    <el-card :bordered="false" style="margin-bottom: 24px;">
      <el-form :model="form" ref="form" style="width: 50%;margin: 0 auto;" label-width="100px">
        <el-form-item
          label="模板CODE"
          prop="code"
        >
          <el-input
            v-model="form.code"
            :disabled="!!id || !canEdit"
            :maxlength="128"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          label="类型"
          prop="type"
          :rules="[
            {required: true,message:'类型不能为空',trigger:'change'},
            { max: 128, message: '类型最大长度为128' }]"
        >
          <template slot="label">类型
            <el-tooltip popper-class="custom-popper" content="模板类型可以通过输入来创建,最大长度为128" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <el-select
            v-model="form.type"
            filterable
            allow-create
            style="width: 100%;"
            placeholder="请选择或输入来创建新的类型"
          >
            <el-option
              v-for="(t, index) in types"
              :key="index"
              :value="t"
              :label="t"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" :disabled="!canEdit" v-model="form.description" :maxlength="200" show-word-limit />
        </el-form-item>
      </el-form>
    </el-card>

    <!--    <el-card :bordered="false" style="margin-bottom: 24px;">-->
    <!--      <div class="table-operator">-->
    <!--        <el-button-->
    <!--          type="primary"-->
    <!--          icon="el-icon-plus"-->
    <!--          @click="$refs.varForm.add(id)"-->
    <!--        >新建-->
    <!--        </el-button>-->
    <!--      </div>-->

    <!--      <el-table-->
    <!--        class="mt10"-->
    <!--        :data="templateVarConfigs"-->
    <!--        v-loading="loading"-->
    <!--        style="width: 100%"-->
    <!--        current-row-key="id"-->
    <!--        stripe-->
    <!--        border-->
    <!--      >-->
    <!--        <el-table-column prop="varName" label="变量名"/>-->
    <!--        <el-table-column prop="description" label="描述"/>-->
    <!--        <el-table-column prop="actions" label="操作" width="150">-->
    <!--          <template slot-scope="scope">-->
    <!--            <template>-->
    <!--              <span class="table-actionItem">-->
    <!--                <el-button type="text" @click="$refs.varForm.edit(scope.row)">编辑</el-button>-->
    <!--              </span>-->
    <!--              <span class="table-actionItem">-->
    <!--                <el-button class="link-danger" type="text" @click="onDeleteVarConfig(scope.row.tempId)">删除</el-button>-->
    <!--              </span>-->
    <!--            </template>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--      </el-table>-->
    <!--    </el-card>-->

    <el-card :bordered="false" style="margin-bottom: 64px;">
      <el-tabs v-model="activeTab" >
        <el-tab-pane name="mail" label="邮件">
          <el-form ref="formMail" label-position="top" label-width="100px">
            <el-form-item label="标题">
              <el-input
                :disabled="!canEdit"
                v-model="templateConfig.mailTitle"
                :maxlength="200"
                show-word-limit
              ></el-input>
            </el-form-item>
            <div class="edit-container">
              <quill-editor
                :disabled="!canEdit"
                style="height:100%"
                v-model="templateConfig.mail"
                ref="myQuillEditor"
                :options="editorOption"
              />
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="false" name="wechat" label="企业微信">
          <el-form label-position="top" label-width="100px">
            <el-form-item label="标题">
              <el-input
                :disabled="!canEdit"
                v-model="templateConfig.wechatTitle"
                :maxlength="200"
                show-word-limit></el-input>
            </el-form-item>
            <el-input type="textarea" :disabled="!canEdit" v-model="templateConfig.wechat" :rows="4"></el-input>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="notice" label="系统消息">
          <el-form label-position="top" label-width="100px">
            <el-form-item label="内容">
              <el-input type="textarea" v-model="templateConfig.mqtt" :rows="4"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!--    todo 提交样式-->
    <div class="footer-toolbar">
      <div style="float: right">
        <el-button
          type="primary"
          @click="handleSubmit"
          :loading="confirmLoading">提交</el-button>
      </div>

    </div>

    <var-form ref="varForm" @ok="onSubmitVarConfig" />
  </div>
</template>

<script>
import { getMsgTemplateconfig,putMsgTemplateconfig,postMsgTemplateconfig,getMsgTemplateconfigTypes } from '@/apis/paas/MsgTemplateConfigController.js'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { uuidv4 } from '@/utils/util'

import VarForm from './__components__/VarForm'
export default {
  name: 'TemplateDetail',
  components: {
    quillEditor,
    VarForm
  },
  data () {
    return {
      loading: false,
      id: 0,
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      total: 0,
      types: [],
      form: {},
      confirmLoading: false,
      activeTab: 'mail',
      templateVarConfigs: [],
      templateConfig: {},
      editorOption: {
        // some quill options
        placeholder: '请输入'
      },
      canEdit: true
    }
  },
  computed: {
  },
  created () {
    const id = this.$route.query.id
    this.id = id
    this.init()
  },
  methods: {
    init () {
      this.getTypeList()
      if (this.id) {
        this.initTemplate(this.id)
      }
    },

    getTypeList () {
      getMsgTemplateconfigTypes().then(res => {
        this.types = res
      })
    },

    initTemplate (id) {
      this.loading = true
      getMsgTemplateconfig({ id })
        .then(res => {
          const { templateConfig, templateVarConfigs } = res
          if (templateConfig) {
            const {
              code,
              type,
              description,
              mail,
              mailTitle,
              // notice,
              // noticeTitle,
              mqtt,
              wechat,
              wechatTitle
            } = templateConfig
            this.templateConfig = {
              mailTitle: mailTitle || '',
              mail: mail || '',
              mqtt: mqtt || '',
              // noticeTitle: noticeTitle || '',
              // notice: notice || '',
              wechatTitle: wechatTitle || '',
              wechat: wechat || ''
            }
            this.$nextTick(() => {
              this.form = {
                code,
                type,
                description
              }
            })
          }
          this.templateVarConfigs = templateVarConfigs.map(ele => {
            ele.tempId = uuidv4()
            return ele
          })
        })
        .finally(() => {
          this.loading = false
        })
    },

    onSubmitType (values) {
      this.getTypeList()
    },
    // 变量的修改新增
    onSubmitVarConfig (values) {
      const { id, formType, varName, description } = values
      if (formType === 'ADD') {
        this.templateVarConfigs.push({
          tempId: uuidv4(),
          id,
          varName,
          description
        })
      } else {
        this.templateVarConfigs = this.templateVarConfigs.map(ele => {
          if (ele.tempId === values.tempId) {
            ele.varName = values.varName
            ele.description = values.description
          }
          return ele
        })
      }
    },

    onDeleteVarConfig (tempId) {
      this.templateVarConfigs = this.templateVarConfigs.filter(ele => ele.tempId !== tempId)
    },
    // 模板提交
    async handleSubmit () {
      // if (this.templateVarConfigs.length === 0) {
      //   this.$notify({
      //     title: '错误',
      //     message: '内置变量不能为空',
      //     type: 'error'
      //   })
      //   return
      // }
      try {
        // const fieldNames = this.id ? ['type'] : ['code', 'type']
        await this.$refs.form.validate()

        const { code, type, description } = this.form
        const model = {
          templateConfig: {
            ...this.templateConfig,
            code: code ? code.trim() : '',
            description: description ? description.trim() : '',
            type
          },
          templateVarConfigs: this.templateVarConfigs
        }
        this.confirmLoading = true
        if (!this.id) {
          postMsgTemplateconfig(model)
            .then(res => {
              this.$router.push({ path: '/messageCenter/template' })
            })
            .finally(() => {
              this.confirmLoading = false
            })
        } else {
          model.templateConfig.id = this.id
          putMsgTemplateconfig(model)
            .then(res => {
              this.$router.push({ path: '/messageCenter/template' })
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      } catch (error) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-container {
  height: 200px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 20px;
  margin-bottom: 66px;
}
.footer-toolbar {
  position: fixed;
  width: calc(100% - 310px);
  bottom: 0;
  right: 0;
  height: 56px;
  line-height: 56px;
  //-webkit-box-shadow: 0 -1px 2px rgb(0 0 0 / 3%);
  //box-shadow: 0 -1px 2px rgb(0 0 0 / 3%);
  background: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 0 24px;
  z-index: 9;
}
</style>
